<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>jquery封装的ajax</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
	</head>
	<body>
		<h2>该页面练习：jQuery封装的ajax</h2>
		<button onclick="getHello()">获取欢迎信息（jQueryAjax-get请求-不携带参数）</button> <br></br>
		<button onclick="sum_get()">求和（jQueryAjax-get请求-携带参数）</button> <br></br>
		<button onclick="sum_post()">求和（jQueryAjax-post请求-携带参数）</button> <br></br>
		
		<script type="text/javascript" >
			function getHello(){
				//jQuery发送ajax，GET请求，不携带参数——完整写法
				$.ajax({
					url:'http://localhost:5000/hello', //请求地址
					// method:'GET', //请求方式
					success(data,stateText,jqXhr){ //请求成功时调用的函数
						// data:数据,
						// stateText:状态的文字描述
						// jqXhr：jQuery封装的xhr
						console.log('请求成功了',data)
					},
					error(jqXhr,stateText,errMsg){ //请求失败时调用的函数
						console.log('请求失败了',errMsg)
					}
				})

				//jQuery发送ajax，GET请求，不携带参数——精简写法
				$.get('http://localhost:5000/hello',(data)=>{
					console.log('请求成功了',data)
				})
			}

			function sum_get(){
				//jQuery发送ajax，GET请求，携带参数——完整写法
				/* $.ajax({
					url:'http://localhost:5000/increment/1/2',
					method:'GET',
					// data:{n1:100,n2:300},//携带query参数
					//如果携带的是params参数，需要自己手动在url中拼接
					success(data){
						console.log('请求成功了',data)
					},
					error(_,__,errMsg){
						console.log('请求失败了',errMsg)
					}
				}) */

				//jQuery发送ajax，GET请求，携带参数——精简写法
				$.get('http://localhost:5000/increment/1/2',(data)=>{
					console.log('请求成功',data)
				})
			}
			
			function sum_post(){
				//jQuery发送ajax，POST请求，完整写法
				$.ajax({
					url:'http://localhost:5000/increment',
					method:'POST',

					//携带urlencoded编码的请求体参数
					// data:{n1:1,n2:3}, 

					//携带json编码的请求体参数
					contentType:'application/json',
					data:'{"n1":1,"n2":3}',

					success(data){
						console.log('ok',data)
					},
					error(_,__,errMsg){
						console.log('失败了',errMsg)
					}
				})

				//jQuery发送ajax，POST请求，精简写法（一旦选择了该写法，就无法携带json编码的请求体参数了）
				$.post('http://localhost:5000/increment',{n1:100,n2:200},(data)=>{
					console.log('成功了',data)
				})
			}
		</script>
	</body>
</html>